import 'package:flutter/material.dart';
import 'package:flutter_vant/main.dart';
import 'package:simulator/pages/home/style.dart'
    show MainStyle, MainButtonStyle;

class HomeButton extends HookWidget {
  final String name;
  final Function()? onClick;
  const HomeButton({Key? key, this.name = '', this.onClick}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    final isHover = useState(false);
    return MouseRegion(
      onEnter: (_) => isHover.value = true,
      onExit: (_) => isHover.value = false,
      child: Frame(
        styles: MainButtonStyle.button(isHover.value),
        onClick: onClick,
        children: [
          TextView(
            name,
            styles: MainButtonStyle.buttonName,
          ),
          const Icon(
            Icons.navigate_next,
          ),
        ],
      ),
    );
  }
}

class Home extends HookWidget {
  const Home({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    renderTitle() {
      return TextView('轻量、可靠的移动端组件库', styles: MainStyle.desc);
    }

    Widget renderButton(String name, String? to) {
      return HomeButton(
        name: name,
        onClick: () {
          Navigator.pushNamed(context, to ?? '/button');
        },
      );
    }

    renderGroup(String title, List data) {
      return Frame(
        styles: MainStyle.group,
        children: [
          TextView(title, styles: MainStyle.title),
          ...data.map((e) {
            return renderButton(e['name'], e['to']);
          }).toList()
        ],
      );
    }

    renderList() {
      final List<dynamic> listData = [
        {
          "name": "基础组件",
          "children": [
            {"name": "Button 按钮", "to": "/button"},
            {"name": "Cell 单元格", "to": '/cell'},
            {"name": "Popup 弹出层", 'to': '/popup'},
            {"name": "Toast 轻提示", 'to': '/toast'},
          ]
        },
        {
          'name': '反馈组件',
          'children': [
            {"name": "ActionSheet 动作面板", "to": '/actionSheet'},
            {"name": 'Notify 消息通知', "to": "/notify"},
            {"name": 'Overlay 遮罩层', "to": "/overlay"},
          ]
        },
        {
          "name": '表单组件',
          "children": [
            {"name": "PasswordInput", 'to': '/passwordInput'}
          ]
        }
      ];
      return Frame(
        styles: MainStyle.list,
        children:
            listData.map((e) => renderGroup(e['name'], e['children'])).toList(),
      );
    }

    return HookView(
      children: [renderTitle(), renderList()],
      backgroundColor: Colors.white,
    );
  }
}
